/*
  学习目标：使用PropTypes包,校验props的数据类型
     3. 浏览器验证
*/

//  1. 导入prop-types
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class App extends Component {
  render() {
    return (
      <div>
        <Child
          name={<h1>React</h1>}
          obj={{ name: 'zs', age: '18' }}
          fn={() => {}}
          isShow={true}
          title={123}
          color="123"
        ></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    const { title } = this.props;
    return <div>{title.toFixed(2)}</div>;
  }
}

// 2. 给组件设置检验规则
Child.propTypes = {
  title: PropTypes.number,
  color: PropTypes.string.isRequired,

  isShow: PropTypes.bool,
  fn: PropTypes.func,
  obj: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }),
  name: PropTypes.element,
};
